<template>
	<view :class="['product-list',type=='across'?'across':'']" >
		<view
			class="product"
			v-for="(product,index) in listData"
			:key="index"
			@tap="toGoods(product)"
		>
			<view class="img">
				<image class="image" :src="product.goods_thumb" @error="errimg" :data-errindex="index" @load="loadimg"></image>
				<!-- <image mode="widthFix" :src="placeholderSrc" :class="['image placeholder',product.loaded?'loaded':'']"  ></image> -->
			</view>
			<view class="cont">
				<view class="name text_over2">{{product.goods_name}}</view>
				<view class="sub text_over2">{{product.goods_brief}}</view>
				<view class="info">
					<view class="price"><block v-if="type=='across'">优惠价</block><text>￥{{ product.shop_price}}</text></view>
					<text class="slogan"><block v-if="type=='across'">原价</block>￥{{product.market_price}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	import {lazyload} from '@/utils/utils.js';
	export default {
		data() {
			return {
				placeholderSrc:"/static/img/defalut_bg.png",
			};
		},
		props:{
			listData:Array,
			type:String
		},
		computed: {
			hasNetwork(){
				return this.$store.state.isConnected
			}
		},
		created(){
			that = this;
		},
		mounted() {
			
		},
		methods:{
			initData(){
				// #ifdef APP-PLUS
				// this.listData.forEach(async (item,index)=>{
				// 	item.goods_thumb =await lazyload(item.goods_thumb)
				// })
				// #endif
			},
			//商品跳转
			toGoods(e) {
				let id = e.id
				uni.navigateTo({
					url: '/pages/goods/goods?id='+id
				});
			},
			errimg(e){
				let index = e.target.dataset.errindex
				let errimg = "/static/img/defalut_bg.png";
				this.listData[index].goods_thumb = errimg
			},
			loadimg(e){
				let index = e.target.dataset.errindex;
				let listitem = this.listData[index];
				listitem.loaded = true;
				that.$set(that.listData,index,listitem)
				// console.log(this.listData[index])
				// this.listData[index].loaded = true
			}
		},
		watch:{
			hasNetwork(newValue,oldValue){
				
			},
			listData(newValue,oldValue){
			}
		}
	}
</script>

<style lang="scss">
	.product-list {
		padding: 0 30upx 3vw 30upx;
		
		display: flex;
		flex-wrap: wrap;
		.product {
			width: 336upx;
			border-radius: 20upx;
			background-color: #fff;
			margin: 0 16upx 16upx 0;
			box-shadow: 0upx 4upx 25upx #eee;
			overflow:hidden;
			.img{
				width: 336upx; height:336upx;position: relative;background:url() no-repeat ;background-size: 336upx;
			}
			image {
				width: 336upx; height:336upx;
				border-radius: 20upx 20upx 0 0;
			}
			.cont{
				.sub{display: none;}
			}
			.name {
				padding: 8upx 4%;
				height: 78upx;
				line-height: 42upx;
				text-align: left;
				overflow: hidden;
				font-size: 30upx;
			}
			.info {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				padding: 12upx 4% 18upx 4%;

				.price {
					color: #F53532;
					font-size: 26upx;
					text{
						font-weight: 600;
						font-size: 30upx;
					}
				}
				.slogan {
					color: #807c87;
					font-size: 24upx;
					position: relative;
					&::after{
						content: "";
						display: block;
						height: 1px;
						width: 105%;
						background: #807c87;
						position: absolute;
						top:50%;
					}
				}
			}
		}
		.product:nth-of-type(2n){
			margin-right: 0;
		}
	}
	.image{position: absolute;left: 0;top: 0;}
	.placeholder {
		opacity: 1;
		transition: opacity 0.4s linear;
	}

	.placeholder.loaded {
		opacity: 0;
	}
	// 商品横排样式
	.across{
		display: block;background: #fff;
		.product{
			width: 100%;display: flex;border-radius: 0;margin-bottom: 30upx;
			.img{
				flex-grow: 0;flex-basis: 1;flex-shrink: 0;width: 240upx;height: 240upx;
				image{border-radius:0 ;width: 240upx;height: 240upx;}
			}
			.cont{
				flex-grow: 1;flex-basis: 1;flex-shrink: 1;margin-left: 20upx;
				.name{-webkit-line-clamp: 1;height: auto;padding: 0;padding-top: 16upx;}
				.sub{display: -webkit-box;height: 72upx;padding-top: 10upx;}
				.info{display: block;padding: 0;margin-top: 10upx;}
			}
		}
	}
</style>
